<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		useRoute
	} from 'vue-router'
	import Poster from '@/components/poster.vue'
	import {
		baseUrl,
		appid,
		h5TitleRight,
		h5Title,
		h5Qrcode
	} from "@/config/index.js"
	import {
		getInfo2Api,
		addRecommendApi
	} from "@/assets/api/other/recommend.js"
	import {
		getInfoApi
	} from "@/assets/api/other/login.js"
	import {
		redirectToToHome,
		navigateToLogin,
		redirectToCreate
	} from '@/assets/scripts/navigate'
	import post from '@/assets/pic/recommend/post.png'

	const userId = ref('')
	const modalFocus = ref()
	const posterImage = ref('')
	const qrcode = ref('')
	const pageParams = ref('')
	const userInfo = ref({})
	const userInfo2 = ref({})
	const title = ref('推荐你使用-' + h5Title)
	const tip = ref('成功建馆后双方分别奖励9.9元等值缅怀币')

	const handleAgree = async () => {
		if (userId.value == userInfo.value.userId) {
			uni.showToast({
				title: '无法接受自己的推荐',
				icon: 'fail'
			})
			return
		}

		const res = await addRecommendApi({
			userId: userId.value,
			userId2: userInfo.value.userId
		})

		if (res.code === 200) {
			uni.showToast({
				title: '操作成功',
				icon: 'success',
				success: () => {
					redirectToCreate()
				}
			})
		} else {
			uni.showToast({
				title: '请先关注公众号',
				icon: 'error',
				complete: () => {
					modalFocus.value.open()
				}
			})
		}
	}

	const handleConfirm = () => {
		uni.showToast({
			title: '长按二维码关注公众号!',
			icon: 'error'
		})
	}

	// 海报生成成功回调
	const onPosterSuccess = (imageUrl) => {
		posterImage.value = imageUrl
	}

	// 海报生成失败回调
	const onPosterError = (error) => {
		console.error('海报生成失败:', error)
		uni.showToast({
			title: '海报生成失败',
			icon: 'error'
		})
	}

	// 初始化二维码链接
	const qrcode_init = () => {
		qrcode.value = baseUrl + `/pages/others/login?pageParams=` +
			`/pages/others/recommend/result?userId=${userInfo2.value.userId}`
	}

	onMounted(() => {
		route_init()
		pageParams_init()
		userInfo_init()
		userInfo2_init()
	})

	const route_init = async () => {
		const route = useRoute()
		if (route.query.userId && route.query.userId !== 'undefined') {
			userId.value = route.query.userId
		}
	}

	const pageParams_init = () => {
		pageParams.value = '/pages/others/recommend/result?userId=' + userId.value
	}

	const userInfo_init = async () => {
		const res = await getInfoApi()
		if (res.code === 200) {
			userInfo.value = res.user
			uni.setStorageSync('user', res.user)
		} else {
			uni.showToast({
				title: '获取用户信息失败',
				icon: 'error',
				complete: () => {
					navigateToLogin(pageParams.value)
				}
			})
		}
	}

	const userInfo2_init = async () => {
		if (!userId.value) {
			uni.showToast({
				title: '获取用户信息失败',
				icon: 'error',
				complete: () => {
					navigateToLogin(pageParams.value)
				}
			})
			return
		}

		const res = await getInfo2Api(userId.value)
		if (res.code === 200) {
			userInfo2.value = res.user
			qrcode_init()
		} else {
			uni.showToast({
				title: '获取用户信息失败',
				icon: 'error',
				complete: () => {
					navigateToLogin(pageParams.value)
				}
			})
		}
	}
</script>

<template>
	<view>
		<uv-modal ref="modalFocus" title="关注公众号创建纪念馆" confirmColor='#299a66' confirmText="长按二维码关注公众号"
			@confirm="handleConfirm">
			<view class="slot-content">
				<view class="d-flex d-flex-fdc d-flex-jcc d-flex-aic focus-box">
					<view class="text">长按保存二维码</view>
					<view class="text">关注{{h5Title}}</view>
					<view class="qrcode">
						<image :src="h5Qrcode" mode="widthFix" class="image image-x"></image>
					</view>
					<view class="text">
						请先关注微信公众号,以防信息丢失(长按二维码后,点击{{h5Title}}头像即可看到关注按钮)
					</view>
				</view>
			</view>
		</uv-modal>

		<uv-navbar :fixed="false" bgColor="#ff5000" :titleStyle="{color:'#fff'}" leftIcon="home-fill"
			leftIconColor="#fff" @leftClick="redirectToToHome" :title="h5TitleRight">
		</uv-navbar>

		<!-- 海报组件 -->
		<Poster v-if="qrcode" :avatar="userInfo2.avatar" :nickName="userInfo2.nickName || ''" :title="title"
			:postImage="post" :tip="tip" :qrcodeUrl="qrcode" :width="750" :ratio="0.5" @ok="onPosterSuccess"
			@error="onPosterError" />

		<view class="p-big box">
			<uv-button @click="handleAgree" text="接受邀请" shape="circle"
				color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))">
			</uv-button>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.box {
		background-color: #ff971b;
	}

	.image {
		display: block;
		width: 100%;
	}

	.image-fill-x {
		width: 100%;
	}

	.focus-box {
		.text {
			color: #9b9b9b;
			width: 80%;
			text-align: center;
		}

		.qrcode {
			width: 50%;

			.image {
				width: 100%;
			}
		}
	}

	.p-big {
		padding: 20px;
	}
</style>